<template>
  <div class="articles-container">
    屈若雅
    <el-card class="box-card">
      <!--      上面的部分-->
      <el-row>
        <el-col :span="18">
          <!--          左侧表单-->
          <el-form ref="addForm" :inline="true" :model="form" label-width="80px">
            <el-form-item label="关键字">
              <el-input v-model.trim="form.keyword" placeholder="根据文章标题搜索"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="form.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="resetForm">清除</el-button>
              <el-button size="small" type="primary" @click="onClickSearch">搜索</el-button>
            </el-form-item>
          </el-form>
          <!--          右侧新增按钮-->
        </el-col>
        <el-col :span="6" style="text-align: right;">
          <el-button icon="el-icon-edit" size="small" type="success" @click="onClickAdd">新增技巧</el-button>
        </el-col>
      </el-row>
      <el-alert
        :closable="false"
        :title="title"
        show-icon
        type="info">
      </el-alert>
      <!--      表格-->
      <el-table :data="tableData" style="width: 100%;margin:10px 0">
        <el-table-column align="center" label="序号" type="index" width="80"></el-table-column>
        <el-table-column align="center" label="文章标题" prop="title" width="400">
          <template slot-scope="scope">
            <div>
              {{ scope.row.title }}
              <el-link v-if="scope.row.videoURL !== '' && scope.row.videoURL !== null"
                       :underline="false" @click="watchVideo(scope.row.videoURL)"><i class="el-icon-film"></i></el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="阅读数" prop="visits"></el-table-column>
        <el-table-column align="center" label="录入人" prop="username"></el-table-column>
        <el-table-column align="center" label="录入时间" prop="">
          <template v-slot="{row}">
            {{ new Date(row.createTime) | parseTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" prop=" ">
          <template v-slot="{row}">
            {{ row.state ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{row}">
            <el-button size="medium" type="text" @click="onPreview(row)">预览</el-button>
            <el-button size="medium" type="text" @click="onClickDisable(row.id,row.state)">
              {{ row.state === 1 ? '禁用' : '启用' }}
            </el-button>
            <!--            state为1是禁用-->
            <el-button :disabled="row.state ===1" size="medium" type="text" @click="onClickEdit(row.id)">修改</el-button>
            <el-button :disabled="row.state ===1" size="medium" type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页-->
      <el-row justify="end" style="height: 60px" type="flex">

        <el-pagination
          :current-page="pageData.page"
          :page-size="pageData.pagesize"
          :page-sizes="[5, 10, 20, 50]"
          :total="counts"
          background
          layout="prev,pager, next, sizes,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </el-row>
      <!--      新增技巧的弹出框-->
      <!--      @update:dialogVisible='$event'-->
      <articles-add :id="id" ref="editRef" :dialogVisible.sync="showAddDialog" @successAdd="loadArticlesList"/>
      <articles-preview :dialogVisible.sync="showPreviewDialog" :previewRow="previewRow"/>
      <div v-show="show">
        <div class="videoBox">
          <div class="closeVideoBox" @click="closeVideo">
            <span class="el-icon-close"></span>
          </div>
          <div class="box">
            <video :src="url" autoplay controls style="object-fit: fill" @pause="showCanvas=true"
                   @play="showCanvas=false">
            </video>
            <div v-show="showCanvas">
              <canvas id="canvas"></canvas>
              <div class="scanCode">扫码手机观看</div>
            </div>
          </div>
        </div>
      </div>

    </el-card>
  </div>
</template>

<script>
import { changeState, list, remove } from '@/api/hmmm/articles.js'
import ArticlesAdd from '../components/articles-add'
import ArticlesPreview from '../components/articles-preview'
import QRCode from 'qrcode'

console.log(QRCode)
export default {
  name: 'articles',
  components: {
    ArticlesPreview,
    ArticlesAdd
  },
  data () {
    return {
      showCanvas: false,
      show: false,
      url: '',
      showAddDialog: false,
      showPreviewDialog: false,
      previewRow: {},
      form: {
        keyword: '',
        state: ''
      },
      pageData: {
        page: 1, // 当前页数
        pagesize: 10 // 每页几条
      },
      counts: 0, // 数据总数
      tableData: [],
      id: '' // 点击编辑把id传到子组件
    }
  },
  computed: {
    title () {
      return '数据一共' + this.counts + '条'
    }
  },
  created () {
    this.loadArticlesList()
  },
  mounted () {

  },
  methods: {

    // 每页几条数据该表
    handleSizeChange (val) {
      this.pageData.pagesize = val
      this.loadArticlesList()
    },
    // 当前页码改变
    handleCurrentChange (val) {
      this.pageData.page = val
      this.loadArticlesList()
    },
    // 获取文章列表
    async loadArticlesList () {
      const { data } = await list(this.pageData)
      this.counts = data.counts
      this.tableData = data.items
    },
    // 点击Serach按钮
    onClickSearch () {
      this.pageData = { ...this.form }
      console.log(this.pageData)
      this.loadArticlesList()
    },
    // 表单清除
    resetForm () {
      this.form = {}
      this.pageData = {}
      this.loadArticlesList()
    },
    // 点击禁用
    async onClickDisable (id, state) {
      await changeState({
        id: id,
        state: !state - 0
      })
      await this.loadArticlesList()
      if (this.form !== {} && this.counts === 0) {
        await this.loadArticlesList()
      } else if (!this.tableData.length) {
        this.pageData.page--
        await this.loadArticlesList()
      }
    },
    // 点击删除
    async del (id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(id)
        this.$message.success({ message: '删除成功!' })
        await this.loadArticlesList()
        if (!this.tableData.length) {
          this.pageData.page--
          await this.loadArticlesList()
        }
      }).catch(() => {
      })
    },
    // 点击预览
    onPreview (row) {
      this.showPreviewDialog = true
      this.previewRow = row
    },
    // 点击新增技巧
    onClickAdd () {
      this.showAddDialog = true
    },
    // 点击修改
    onClickEdit (id) {
      this.showAddDialog = true
      this.id = id
      this.$nextTick(() => {
        this.$refs.editRef.loadEditRowById()
      })
    },
    // 观看视频
    watchVideo (url) {
      this.show = true
      this.url = url
      const QRCode = require('qrcode')
      const canvas = document.getElementById('canvas')
      QRCode.toCanvas(canvas, url, function (error) {
        if (error) console.error(error)
        console.log('success!')
      })
    },
    // 点击视频的关闭
    closeVideo () {
      this.show = false
      this.showCanvas = false
      this.url = ''
    }
  }
}
</script>

<style lang='less' scoped>
.articles-container {
  padding: 10px;

  .el-icon-film {
    color: #00f;
    font-size: 18px;
  }

  .videoBox {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    overflow: hidden;
    z-index: 9999;
    //关闭图标
    .closeVideoBox {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translate(-50%);
      background: rgba(0, 0, 0, .4);
      box-shadow: 0 0 5px rgb(0 0 0 / 40%);
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-size: 20px;
    }

    //放视频的小盒子
    .box {
      width: 800px;
      height: 460px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;

      video {
        width: 800px;
        height: 460px;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      //二维码样式
      /deep/ #canvas {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 148px !important;
        height: 148px !important;
      }

      .scanCode {
        width: 148px;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        background-color: #fff;
        text-align: center;
        position: absolute;
        top: 148px;
        right: 0px;
      }
    }
  }

}
</style>
